<template>
  <div class="app-main">
    <a-card :bordered="false" style="margin-bottom: 10px">
      <div class="table-page-search-wrapper" style="position: relative">
        <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
          <a-row>
            <a-col :span="6">
              <a-form-model-item label="反馈号">
                <a-input v-model="form.blockingFeedbackNumber" :disabled="true" />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="反馈类型">
                <a-input v-model="feedbackType" :disabled="true" />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="反馈范围">
                <a-range-picker v-model="rvTime" :disabled="isDisabled" allowClear style="width:100%;" format="YYYY-MM-DD"
                  valueFormat="YYYY-MM-DD" @change="onTimeChange" />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="反馈数量">
                <a-input v-model="form.feedbackQuantity" :disabled="true" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
    </a-card>
    <a-card :bordered="false">
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button type="primary" v-if="flag == 1" @click="onQuery()">抽取</a-button>
      </div>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <z-table ref="table" rowKey="key" :showAlert="false" :showSelection="false" :loading="loading" :columns="columns"
          :dataSource="pageData" @change="onTableChange">
          <template slot="dataSource" slot-scope="text">
            <span v-if="text == 1">互联网挖掘</span>
            <span v-if="text == 2">人工智能挖掘</span>
            <span v-if="text == 3">涉诈网址上报</span>
          </template>
          <template slot="mobileBlockingStatus" slot-scope="text,recod">
            <span v-if="text == 0">未下发</span>
            <span v-if="text == 1">待封堵</span>
            <span v-if="text == 2">封堵成功</span>
            <span v-if="text == 3">封堵失败</span>
            <p>{{ recod.mobileBlockingTime }}</p>
          </template>
          <template slot="unicomBlockingStatus" slot-scope="text,recod">
            <span v-if="text == 0">未下发</span>
            <span v-if="text == 1">待封堵</span>
            <span v-if="text == 2">封堵成功</span>
            <span v-if="text == 3">封堵失败</span>
            <p>{{ recod.unicomBlockingTime }}</p>
          </template>
          <template slot="telecomBlockingStatus" slot-scope="text,recod">
            <span v-if="text == 0">未下发</span>
            <span v-if="text == 1">待封堵</span>
            <span v-if="text == 2">封堵成功</span>
            <span v-if="text == 3">封堵失败</span>
            <p>{{ recod.telecomBlockingTime }}</p>
          </template>
        </z-table>
      </div>
      <div class="btnBox">
        <template v-if="flag == 1">
          <a-button type="primary" :loading="bntLoading1" @click="onSave()">保存</a-button>
          <a-button style="margin-left:20px;" :loading="bntLoading2" @click="onSend()">推送</a-button>
        </template>
        <a-button v-else type="primary" @click="onBack()">返回</a-button>
      </div>
    </a-card>
  </div>
</template>

<script>
import * as api from '@/api/plugging/authority/fd.js'
export default {
  data() {
    return {
      labelCol: { span: 5 },
      wrapperCol: { span: 17 },
      loading: false,
      bntLoading1: false,
      bntLoading2: false,
      isDisabled: false,
      reloading: false,
      form: {
        batchNoList: [],
        blockingFeedbackNumber: '',
        feedbackQuantity: ''
      },
      feedbackType: '手工反馈',
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      rvTime: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) => {
            return `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
          }
        },
        {
          title: '封堵地址',
          dataIndex: 'fraudUrl',
          // width: 120,
        },
        {
          title: '数据来源',
          dataIndex: 'dataSource',
          // width: 120,
          scopedSlots: { customRender: 'dataSource' },
        },
        {
          title: '发现时间',
          dataIndex: 'discoveryTime',
          // width: 130,
        },
        {
          title: '管局接收时间',
          dataIndex: 'receivedTime',
          // width: 130,
        },
        {
          title: '反馈推送时间',
          dataIndex: 'feedbackTime',
          // width: 130,
        },
        {
          title: '移动封堵状态',
          dataIndex: 'mobileBlockingStatus',
          // width: 130,
          scopedSlots: { customRender: 'mobileBlockingStatus' },
        },
        {
          title: '联通封堵状态',
          dataIndex: 'unicomBlockingStatus',
          // width: 130,
          scopedSlots: { customRender: 'unicomBlockingStatus' },
        },
        {
          title: '电信封堵状态',
          dataIndex: 'telecomBlockingStatus',
          // width: 130,
          scopedSlots: { customRender: 'telecomBlockingStatus' },
        },
        {
          title: '批次号',
          dataIndex: 'batchNo',
          // width: 120,
        },
      ],
      pageData: {},
      flag: this.$route.query.flag,
      id: this.$route.query.id,
      feedbackNumber: this.$route.query.feedbackNumber,
      startTime: this.$route.query.startTime,
      endTime: this.$route.query.endTime
    }
  },
  created() {
    if (this.id == undefined) {
      this.onGetFeedbackNumber() //新增，获取反馈号
    } else {
      this.form.id = this.id
      this.form.blockingFeedbackNumber = this.feedbackNumber
      this.rvTime = [this.startTime, this.endTime]
      this.$set(this.form, 'startTime', this.startTime)
      this.$set(this.form, 'endTime', this.endTime)
      this.getDetail()  //编辑
    }
    if (this.flag == 2) { //详情
      this.isDisabled = true
    } else {
      this.isDisabled = false
    }
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onTimeChange(date) {
      this.$set(this.pageFilter, 'startDiscoveryTime', date[0])
      this.$set(this.pageFilter, 'endDiscoveryTime', date[1])
      this.$set(this.form, 'startTime', date[0])
      this.$set(this.form, 'endTime', date[1])
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    //抽取列表
    refreshTable() {
      if (this.pageFilter.startDiscoveryTime == undefined || this.pageFilter.endDiscoveryTime == undefined) {
        this.$message.warning("请选择反馈范围！")
        return
      }
      this.loading = true
      api.fd_fb_extract(this.pageFilter).then((res) => {
        if (res.success) {
          this.pageData = res.result ? res.result : {}
          if (res.message != '') {
            this.form.batchNoList = res.message.split(',') //全部批次号
          }
          this.form.feedbackQuantity = res.result.total
          this.loading = false
        } else {
          this.$message.success(res.message)
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warning(res.message)
        })
    },
    getDetail() {
      this.loading = true
      this.pageFilter.blockingFeedbackNumber = this.feedbackNumber
      api.fd_fb_detailList(this.pageFilter).then((res) => {
        if (res.success) {
          this.pageData = res.result ? res.result : {}
          if (res.message != '') {
            this.form.batchNoList = res.message.split(',') //全部批次号
          }
          this.form.feedbackQuantity = res.result.total
          this.loading = false
        } else {
          this.$message.success(res.message)
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warning(res.message)
        })
    },
    //反馈单号
    onGetFeedbackNumber() {
      api.fd_fb_getFeedbackNumber().then((res) => {
        if (res.success) {
          this.form.blockingFeedbackNumber = res.result
        }
      })
    },
    //保存
    onSave() {
      if (this.form.batchNoList.length <= 0) {
        this.$message.warning("请抽取数据！")
        return
      }
      this.bntLoading1 = true
      api.fd_fb_addOrUpdate(this.form).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.bntLoading1 = false
          this.onBack()
        } else {
          this.$message.warning(res.message)
          this.bntLoading1 = false
        }
      })
        .catch((e) => {
          this.bntLoading1 = false
          this.$message.warning(res.message)
        })
    },
    //推送
    onSend() {
      if (this.form.batchNoList.length <= 0) {
        this.$message.warning("请抽取数据！")
        return
      }
      this.bntLoading2 = true
      api.fd_fb_feedbackPush(this.form).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.bntLoading2 = false
          this.onBack()
        } else {
          this.$message.warning(res.message)
          this.bntLoading2 = false
        }
      })
        .catch((e) => {
          this.bntLoading2 = false
          this.$message.warning(res.message)
        })
    },
    onBack() {
      this.$router.go(-1)
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    },
  },
}
</script>
<style lang="less" scoped>
.btnBox {
  margin-top: 40px;
  display: flex;
  justify-content: center
}

/deep/.ant-card-body {
  padding: 15px 24px;
}

/deep/.ant-row {
  margin-bottom: 5px;
}
</style>
